<template>
	<view class="page-wrapper">
		<div class="content">
			<h3>请输入新的手机号</h3>
			<p>
				<span>+86</span>
				<input type="text" placeholder="请输入新的手机号" />
			</p>
		</div>
		<button @click="sendCode">获取验证码</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			sendCode() {
				uni.showToast({
					title: '验证码发送成功！',
					icon: 'none',
					duration: 1500
				})
			}
		}
	}
</script>

<style scoped>
	.page-wrapper {
		box-sizing: border-box;
		padding: 20rpx 30rpx 0 30rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 60rpx 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
	.content>h3 {
		width: 100%;
		font-size: 45rpx;
		color: #333333
	}
	.content>p {
		display: flex;
		align-items: center;
		height: 140rpx;
		border-bottom: 1rpx solid #eeeeee;
	}
	.content>p>span {
		font-size: 30rpx;
		color: #999999;
	}
	.content>p>input {
		font-size: 30rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
	}
	
	.page-wrapper>button {
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 602rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
		margin-top: 30rpx
	}
</style>
